<template>
  <div class="openDetail">
    <hr style="border: none">
    <div>
      <hr style="border: none">
      <el-form :inline="true" :model="queryForm.data" class="demo-form-inline">
        <el-form-item>
          <el-input clearable v-model="queryForm.data.buildName" placeholder="报修地点"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryFormSubmit()" icon="el-icon-search">查询</el-button>
        </el-form-item>
      </el-form>
      <!--<el-button type="primary" size="small" @click="$router.push({ name: 'repaire-build-add-or-update'})"-->
                 <!--icon="el-icon-plus">添加-->
      <!--</el-button>-->
      <el-button type="primary" size="small" round @click="submitForm()"
                 icon="el-icon-plus">添加
      </el-button>
      <el-dialog title="添加" :visible.sync="dialogTableVisible" center :append-to-body='true' :lock-scroll="false" width="30%">
        <add-build @changestatus="changestatus"></add-build>
      </el-dialog>
    </div>

    <!--<div id="myChart" :style="{width: '300px', height: '300px'}"></div>-->
    <!--<template>-->
      <!--<div ref = 'myEchart' style="width:500px;height:400px"></div>-->

    <!--</template>-->

    <hr>
    <div>
      <el-table :data="tableData" v-loading="loading" style="width: 100%">
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="报修地点" prop="buildName"></el-table-column>
        <el-table-column label="报修楼类型" prop="typeName"></el-table-column>
        <el-table-column label="操作" fixed="right" width="600" prop="id">
          <template slot-scope="scope">
            <el-button size="small" type="danger" @click="deleteItem(scope.$index, scope.row)"
                       icon="el-icon-delete">删除
            </el-button>
            <!--<el-button size="small" type="primary"-->
            <!--@click="$router.push({name:'sys-build-add-or-update',params:{id:scope.row.id}})"-->
            <!--icon="el-icon-edit">修改-->
            <!--</el-button>-->
          </template>
        </el-table-column>
      </el-table>

      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="pages.currentPage" :page-sizes="pages.pageSizeList"
                     :page-size="pages.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pages.total"
                     prev-text="上一页"
                     next-text="下一页" background>
      </el-pagination>
    </div>

  </div>
</template>

<script>
  import echarts from 'echarts'
  import AddBuild from './build-add-or-update.vue'
  export default {
    components: {AddBuild},
    data () {
      return {
        dialogTableVisible: false,
        // dataList:[
        //   {value:1, name:'0-20分'},
        //   {value:3, name:'21-50分'},
        //   {value:24, name:'51-70分'},
        //   {value:7, name:'71-80分'},
        //   {value:3, name:'81-100分'},
        // ],
        loading: false,
        url: {
          queryPage: '/baoxiu/buildDetail/findAll',
          delete: '/baoxiu/buildDetail/delete'
        },
        pages: {
          total: 0,
          currentPage: 1,
          pageSize: 10,
          pageSizeList: [5, 20, 40, 100]
        },
        tableData: [],
        queryForm: {
          dialogFormVisible: false,
          data: {
            current: 1,
            size: 20,
            buildName: ''
          }
        }
      }
    },
    // mounted () {
    //   let obj = this.$refs.myEchart;
    //   this.drawLine();
    //   if(obj){
    //     this.initChart();
    //   }
    // },
    methods: {
      changestatus () {
        this.dialogTableVisible = false
        console('111')
      },
      submitForm () {
        this.dialogTableVisible = true// 默认页面不显示为false,点击按钮将这个属性变成true
      },
      // initChart(){
      //   let myChart = echarts.init(this.$refs.myEchart);
      //   myChart.setOption({
      //     tooltip: {
      //       trigger:'item',
      //       formatter: "{a} <br/>{b}: {c} <br/> ({d}%)"
      //     },
      //     series : [
      //       {
      //         name:'学生作业提交率',
      //         type: 'pie',
      //         radius : '80%',
      //         center: ['52%', '53%'],
      //         avoidLabelOverlap: false,
      //         data: this.dataList,
      //         itemStyle: {
      //           emphasis: {
      //             shadowBlur: 5,
      //             shadowOffsetX: 0,
      //             shadowColor: 'rgba(0, 0, 0, 0.3)'
      //           }
      //         }
      //       }
      //     ]
      //   })
      // },



      // drawLine () {
      //   // 基于准备好的dom，初始化echarts实例
      //   let myChart = this.$echarts.init(document.getElementById('myChart'))
      //   // 绘制图表
      //   myChart.setOption({
      //     title: {text: '在Vue中使用echarts'},
      //     tooltip: {},
      //     xAxis: {
      //       data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      //     },
      //     yAxis: {},
      //     series: [{
      //       name: '销量',
      //       type: 'bar',
      //       data: [5, 20, 36, 10, 10, 20]
      //     }]
      //   })
      // },
      handleSizeChange: function (val) {
        this.pages.pageSize = val
        // this.queryForm.data.pageSize = this.pages.pageSize
        console.log(this.pages.pagesize)
        this.queryFormSubmit()
      },
      handleCurrentChange: function (val) {
        this.pages.currentPage = val
        // this.queryForm.data.currentPage = this.pages.currentPage
        console.log(this.pages.currentPage)
        this.queryFormSubmit()
      },
      // 加载列表页
      queryFormSubmit: function () {
        this.queryForm.data.current = this.pages.currentPage
        this.queryForm.data.size = this.pages.pageSize
        this.loading = true
        this.$http
          .get(this.$http.adornUrl(this.url.queryPage), {
            params: this.queryForm.data
          })
          .then(({data}) => {
            this.loading = false
            this.tableData = data.records
            console.log(this.tableData, 'tableData')
            this.pages.total = data.total
          })
      },
      // 删除角色
      deleteItem: function (index, row) {
        this.$confirm('此操作将删除保修地点' + row.buildName + ', 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.$http
              .get(this.$http.adornUrl(this.url.delete), {
                params: {id: row.id}
              })
              .then(
                () => {
                  this.$message({
                    type: 'success',
                    message: '删除成功!',
                    duration: 1500,
                    onClose: () => {
                      this.queryFormSubmit()
                    }
                  })
                }
              )
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      }
    },
    created: function () {
      this.queryFormSubmit()
    }
  }
</script>

<style scoped>
</style>
